<template>
  <div id="login">
    <div class="logoshow">
      <icon class="arbitLogo"></icon>
      <span>鹰潭仲裁委平台管理系统</span>
    </div>
    <div class="loginInfo" @keyup.enter="submit">
      <div class="right">
         <h2>用户登录</h2>
         <Form :model="formRight" label-position="right" :label-width="80">
            <FormItem label="用户名">
                <Input v-model="formRight.input1"></Input>
            </FormItem>
            <FormItem label="密码">
                <Input v-model="formRight.input2" type="password"></Input>
            </FormItem>
            <!-- <FormItem> -->
                <span class="btn" @click="submit">登录</span>
            <!-- </FormItem> -->
        </Form>
      </div>
    </div>
    
  </div>
</template>

<script>

export default {
  name: 'Login',
  data(){
    return {
      formRight: {
          input1: '',
          input2: ''
      },
      times:false
    }
  },
  methods:{
    submit(){
      if(this.formRight.input1&&this.formRight.input2){
          if(this.times) return;
          this.times = !this.times; 
          this.$http.post('/api'+this.urls.login,{username:this.formRight.input1,password:this.formRight.input2}).then((result)=>{
                if(result.data.code===200){
                  
                  this.formRight.input1='';
                  this.formRight.input2='';
                  localStorage.setItem('rolename',result.data.data.roles[0].description)
                  localStorage.setItem('roleid',result.data.data.roles[0].role)
                  localStorage.setItem('username',result.data.data.name)
                  localStorage.setItem('userid',result.data.data.uid)
                  this.$store.dispatch('changeRolename',result.data.data.roles[0].description)
                  this.$store.dispatch('changeRoleid',result.data.data.roles[0].role)
                  this.$store.dispatch('changeUsername',result.data.data.name)
                  this.$store.dispatch('changeUserid',result.data.data.uid)
                  // setTimeout(()=>{
                     
                    // if(result.data.data.roles&&result.data.data.roles[0].role=='financeCompany'){   //金融/平台
                    //     this.$router.push('/Syspage/Apply')
                    // }else 
                    if(result.data.data.roles&&result.data.data.roles[0].role=='arbSecretary'){    //秘书
                        this.$Message.success('登录成功');
                        this.$router.push('/Syspage/VerifycommissionerIndex')
                    }else if(result.data.data.roles&&result.data.data.roles[0].role=='arbDirector'){          //主任
                        this.$Message.success('登录成功');
                        this.$router.push('/Syspage/VerifydirectorIndex')
                    }else if(result.data.data.roles&&result.data.data.roles[0].role=='arbPerson'){    //仲裁员
                       this.$Message.success('登录成功');
                       this.$router.push('/Syspage/ArbitratordirectorIndex')
                    }else{
                         this.$Message.warning('没有权限登录');
                    }
                    
                  // },500)
                }else{
                  this.$Message.warning('用户名或密码有误');
                }
          })

          setTimeout(()=>{
            this.times = !this.times;
          },2000)
      }else{
        this.$Message.warning('用户名或密码不能为空');
      }
      
    }
  },
  created(){
    // var lett = this;
    localStorage.setItem('username','')
    localStorage.setItem('rolename','')
    localStorage.setItem('userid','')
    this.$store.dispatch('changeRolename','')
    this.$store.dispatch('changeUsername','')
    this.$store.dispatch('changeUserid','')
    // window.clearInterval(this.settimes)
  }
}
</script>

<style scoped>
  #login{
    /* background: url('../assets/login.png'); */
     /* position:fixed;
      top: 0;
      left: 0;
     width:100%;
      height:100%;
      min-width: 1000px;
      z-index:-10;
      zoom: 1;  */
      height:100%;
     /* display: flex;
     align-items: center;
     -webkit-align-items:center;
     -o-align-items:center; */
     background-color: #fff;
     background: url('../assets/arbitbg.png') no-repeat;
     background-size:  100% 100%;;
     -webkit-background-size:  100% 100%;
     -o-background-size:  100% 100%;
     background-position: center 0;
  }
  .logoshow{
    position: absolute;
    left: 50%;
    margin-top: -390px;
    top: 50%;
    margin-left: -424px;
    font-size: 60px;
  }
  .logoshow span{
    color: #fef700;
    vertical-align: text-bottom;
    line-height: 145px;
    margin-left: 30px;
  }
  .arbitLogo {
      background: url(../assets/arbitlogo.png);
      width: 146px;
      height: 145px;
  }
  h2{
    height: 120px;
    line-height: 120px;
  }
  .ivu-form-item{
    margin-bottom: 46px;
  }
  .loginInfo{
    width: 446px;
    height: 392px;
    position: absolute;
    left: 50%;
    margin-left: -258px;
    top: 50%;
    margin-top: -200px;
    /* display: flex; */
    background: #fff;
    padding: 0 60px;
    /* opacity: 0.8; */
  }
  .right{
    text-align: center;
    align-self: center;
     -webkit-align-self:center;
     -o-align-self:center;
  }
  .ivu-form{
        padding-right: 30px;
        text-align: right;
  }

  .btn{
    background: #86141d;
    color: #fff;
    line-height: 30px;
    width: 260px;
    height: 30px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
</style>
